<html>
  <head>
    <title>Lesson05 - React第五课之State与生命周期</title>
  </head>
  <body>
    <h1>生命周期函数测试，打开控制台查看详情</h1>
    <div id="app"></div>

    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      class Parent extends React.Component {
        constructor(props) {
          console.log('Parent ----- constructor');
          super(props);
          this.state = {
            num: 0
          }
        }
        componentWillMount() {
          console.log('Parent ----- componentWillMount');
        }
        
        componentWillUnmount() {
          console.log('Parent ----- componentWillUnmount');
        }

        componentDidMount() {
          console.log('Parent ----- componentDidMount');
          this.setState({
            num: ++this.state.num
          });
        }

        componentWillReceiveProps() {
          console.log('Parent ----- componentWillReceiveProps');
        }

        shouldComponentUpdate() {
          console.log('Parent ----- shouldComponentUpdate');
          return true;
        }

        componentWillUpdate() {
          console.log('Parent ----- componentWillUpdate');
        }

        componentDidUpdate() {
          console.log('Parent ----- componentDidUpdate');
        }

        render() {
          console.log('Parent ----- render');
          if (this.state.num === 2) { // 此处可以将条件改为 false 来查看其他情况
            return <h1>Children组件被卸载了</h1>
          } else {
            return (
              <div>
                <Children num={this.state.num}/>
                {this.state.num} <button onClick={() => {
                  this.setState({
                    num: this.state.num++
                  });
                }}>增加</button>
              </div>
            )
          }
        }
      }
      
      class Children extends React.Component {
        constructor(props) {
          console.log('Children ----- constructor', props.num);
          super(props);
        }

        componentWillMount() {
          console.log('Children ----- componentWillMount', this.props.num);
        }
        
        componentWillUnmount() {
          console.log('Children ----- componentWillUnmount');
        }

        componentDidMount() {
          console.log('Children ----- componentDidMount', this.props.num);
        }

        componentWillReceiveProps() {
          console.log('Children ----- componentWillReceiveProps', this.props.num);
        }

        shouldComponentUpdate() {
          console.log('Children ----- shouldComponentUpdate', this.props.num);
          return true;
        }

        componentWillUpdate() {
          console.log('Children ----- componentWillUpdate', this.props.num);
        }

        componentDidUpdate() {
          console.log('Children ----- componentDidUpdate', this.props.num);
        }

        render() {
          console.log('Children ----- render', this.props.num);
          debugger
          return (
            <div>数字： { this.props.num }</div>
          )
        }
      }
      
      ReactDOM.render(<Parent/>, document.getElementById('app'));
    </script>
  </body>
</html>